import { useNavigate } from "react-router-dom";
import Header from "@/components/header";
import Button from "@/components/button";
import Footer from "@/components/footer";
import "./index.less";

function NotFound() {
  const navigate = useNavigate();

  const handleGoHome = () => {
    navigate("/home");
  };

  return (
    <div className="not-found-page">
      <Header />

      <div className="not-found-content">
        <div className="error-container">
          <div className="error-icon">
            <div className="error-number">4</div>
            <div className="error-zero">0</div>
            <div className="error-number">4</div>
          </div>

          <div className="error-title">页面未找到</div>

          <div className="error-message">抱歉，您访问的页面不存在请检查</div>
        </div>
      </div>

      <Footer>
        <Button type="primary" block onClick={handleGoHome} className="home-button">
          返回首页
        </Button>
      </Footer>
    </div>
  );
}

export default NotFound;
